<template>
  <div>
    <div class="container">
      <div class="wrapper">
        <!-- 面包屑 -->
        <el-breadcrumb
          class="breadcrumb"
          separator=">"
        >
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ categoryDateList.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 轮播图 -->
        <el-carousel
          :interval="5000"
          arrow="hover"
          height="500px"
          class="banner"
        >
          <el-carousel-item v-for="item in homeBannerList" :key="item">
            <img :src="item.imgUrl" alt="">
          </el-carousel-item>
        </el-carousel>
        <!-- 全部分类 -->
        <div class="category">
          <div class="title">全部分类</div>
          <div class="category-card">
            <div
              class="category-card-item"
              v-for="item in categoryDateList.children"
              :key="item.id"
              @click="changePage(item.id)"
            >
              <img :src="item.picture" alt="">
              {{ item.name }}
            </div >
          </div>
        </div>
        <!-- 商品列表 -->
        <div class="goods" v-for="children in categoryDateList.children" :key="children.id">
          <div class="good-title">
            <div class="good-title-name">
              - {{ children.name }} -
            </div>
            <div class="good-more">
              <span>查看全部</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
            <div class="good-desc">温暖柔软，品质之选</div>
          </div>
          <div class="good-card">
            <div
              class="good-card-item"
              v-for="item in children.goods"
              :key="item.id"
              @click="changeGoodsPage(item.id)"
            >
              <div class="good-img">
                <img :src="item.picture" alt="">
              </div>
              <div class="good-name">
                {{ item.name }}
              </div>
              <div class="good-desc">
                {{ item.desc }}
              </div>
              <div class="good-price">
                ￥{{ item.price }}
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="occupyHome">
// import { ArrowRight } from '@element-plus/icons-vue';
import { useStore } from 'vuex';
// import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { computed } from 'vue';
const router = useRouter();
const route = useRoute();
const store = useStore();
const id = ref('');
function changePage(data) {
  router.push({
    name: 'sub',
    params: {
      id: data,
    },
  });
}
function changeGoodsPage(data) {
  router.push({
    name: 'product',
    params: {
      id: data,
    },
  });
}


store.dispatch('home/updateHomeBannerList'); // 轮播图
const homeBannerList = computed(() => store.state.home.homeBannerList);

const categoryDateList = computed(() => store.state.category.categoryList);
// // 监听路由变化
watch(() => router.currentRoute.value.path, (newValue, oldValue)=> {
  // 判断路由地址是否包含 sub , 不包含才发请求
  if (!newValue.includes('sub') && !newValue.includes('product')) {
    id.value = route.params.id;
    store.dispatch('category/updateCategoryList', id.value);
  }
}, { immediate: true });
// const breadcrumb = computed(() => {
//   return route.matched
//     .map((item) => item.name !== '分类' ?
//       { ...item, breadcrumbName: item.name } :
//       { ...item, breadcrumbName: categoryDateList.value.find((c) => route.params.id === c.id)?.name },
//     );
// });


</script>
<style lang="scss" scoped>
.container{
  background: #f5f5f5;
  .wrapper{
    box-sizing: border-box;
    padding: 25px 10px;
    width: 1240px;
    margin: 0 auto;
    // 面包屑
    .breadcrumb{
      margin-bottom: 20px;
      font-size: 14px;
      color: #999;
      .el-breadcrumb__item{
        color: #999;
      }
    }
    // 轮播图
    .banner{
      :deep(.el-carousel__button){
        border-radius: 50%;
        width: 12px;
        height: 12px;
      }
    }
    // 全部分类
    .category{
      margin-top: 20px;
      background: #fff;
      .title{
        width: 1240px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 28px;

      }
      .category-card{
        display: flex;
        width: 1240px;
        height: 160px;
        padding: 0 32px;
        cursor: pointer;
        .category-card-item{
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 140px;
          width: 168px;
          &:hover{
            color: #27ba9b;
          }
          img{
            width: 100px;
            height: 100px;
          }
        }
      }
    }
    // 商品列表
    .goods{
      margin-top: 20px;
      background: #fff;
      .good-title{
        position: relative;
        .good-title-name{
          width: 1240px;
          height: 100px;
          text-align: center;
          line-height: 100px;
          font-size: 28px;
          color: #666;
        }
        .good-more{
          cursor: pointer;
          position: absolute;
          top: 50px;
          right: 20px;
          display: flex;
          align-items: center;
          color: #999;
          cursor: pointer;
          &:hover{
            color: #27ba9b;
          }
        }
        .good-desc{
          position: absolute;
          width: 1240px;
          height: 40px;
          bottom: -20px;
          text-align: center;
          font-size: 20px;
          color: #999;
        }
      }
      .good-card{
        cursor: pointer;
        display: flex;
        width: 1240px;
        box-sizing: border-box;
        margin-top: 30px;
        padding: 0 65px 30px;
        .good-card-item{
          width: 220px;
          padding: 10px 30px;
          box-sizing: border-box;
          transition: all 200ms linear;
          &:hover{
            box-shadow: 0 3px 10px #ccc;
            transform: translateY(-4px);
          }
          .good-img{
            padding-top: 10px;
            img{
              width: 160px;
              height: 160px;
            }
          }
          .good-name{
            padding-top: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .good-desc{
            padding-top: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

          }
          .good-price{
            padding-top: 10px;
            font-size: 20px;
            color: #cf4444;
            text-align: center;

          }
        }
      }

    }
  }
}
</style>

